<template>
  <div style="height: 100%;width: 100%;display: flex;flex-direction: column">
    <div style="flex: 1;display: flex;flex-direction: row;flex-wrap: wrap">
      <div style="flex-basis: 33.33%;padding: 16px;box-sizing: border-box;height: 50%;" v-for="(item,index) in bhList">
        <div @click="lookCard(item)" style="height: 100%;width: 100%;box-sizing: border-box">
          <div :style="{'background':item.look?'#e1e1e1':'#48D1CC'}"
               style="border-radius: 16px;width: 320px;height: 100%">
            <div style="display: flex;align-items: center;justify-content: center;height: 100%;font-size: 32px;flex-direction: column"
                 v-if="item.look">
              <img style="height: 200px" v-if="item.id == 1" src="../../../assets/images/指挥.jpeg"/>
            </div>
          </div>
        </div>

      </div>
    </div>
    <a-button @click="lottery">重置</a-button>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      bhList: [
        {id: 0, look: false},
        {id: 1, look: false},
        {id: 2, look: false},
        {id: 3, look: false},
        {id: 4, look: false},
        {id: 5, look: false},
      ]
    }
  },
  mounted() {
    this.lottery();
  },
  methods: {
    lottery() {
      this.bhList = [
        {id: 0, look: false},
        {id: 1, look: false},
        {id: 2, look: false},
        {id: 3, look: false},
        {id: 4, look: false},
        {id: 5, look: false},
      ]
      this.bhList = this.shuffleArray(this.bhList);
    },
    lookCard(item) {
      item.look = true;
    },
    shuffleArray(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }
  }
}
</script>

<style scoped>

</style>